<template>
<!-- 办事指南 -->
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="办事指南" left-arrow @click-left="$router.go(-1)"/>
    <van-tabs v-model="active" @click="activeClick">
      <!-- 通知 -->
      <van-tab title="通知">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 
          <van-cell v-for="item in articleList"  @click="oNarticle(item.id)" :key="item.id" >
            <ul>
              <li>
                <div class="guide-img">
                  <img :src="item.funImg" alt="">
                </div>
                <div class="guide-content">{{item.title}}</div>
              </li>
            </ul> 
          </van-cell>
        </van-list>
      </van-tab>
      <!-- 办理事项 -->
      <van-tab title="办理事项">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >  
          <van-cell v-for="item in articleList" :key="item.id">
            <van-cell class="matters" :title="item.title" is-link @click="oNhelpList(item.id)"  />
            <p class="dataName">{{item.createDate}}</p>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
 <script>
 import apiHttp from '../../../../api/index'
 import { Toast } from 'vant';
   export default {
     data(){
       return{
          id:this.$route.query.id ? this.$route.query.id : '',
          active: sessionStorage.getItem('guideActive') ? sessionStorage.getItem('guideActive') : 0,
          content:"",
          loading: false,
          finished: false,
          articleList:[],
          type:6,
          page:0,
          total:-1,
          userId:sessionStorage.getItem('userId'),
       }
     },
     watch:{
       active(newVal,oldVal){
         this.loading = true
          this.finished = false
          this.articleList = []
          this.total = -1
          this.page = 0
        if(newVal == 0){
          this.type = 6
        }else{
          this.type = 13
        }
          this.onLoad()
       }
     },
    mounted: function(){

    },
    methods:{
      activeClick(){
        sessionStorage.setItem('guideActive',this.active)
      },
      // 通知
      oNarticle(id){
        this.$router.push({path:"/details/details",query: { id: id}});
      },
      // 新闻列表---接口
      getArticleList(){
        let params ={
          page: this.page,
          pageSize :10,
          commId:this.id,
          type:this.type
        }
        apiHttp.comIndex.getArticleList(params,resp=>{
        if(resp.resultCode == '000000'){
            for(let i = 0; i < resp.data.articleList.length; i++){
              this.articleList.push(resp.data.articleList[i])
            }
            this.total = resp.data.total
            this.loading = false;
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      onLoad(){
        if(this.articleList.length==this.total){
            this.finished  = true
            this.loading = false;
        }else{
            this.page++
            this.getArticleList();
        }
      },
     
      // 办理事项
      oNhelpList(id){
          this.$router.push({path:"./partyList/onHelpList",query: { id: id}});
      },
     
    }
   }
 </script>
 <style scoped>
  @import '../../../../assets/css/community/listIntroduction/guide.css';
  /* .guide-img {
      height: 6rem;
  } */
  .guide-content{
    margin: 0.5rem 0.5rem;
    font-size: .6rem;
    font-weight: 600;
    text-align: left;
    overflow:hidden;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    padding: 0;
  }
  .van-cell::after {
    content: ' ';
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    left: 15px;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 0px solid #ebedf0;
  }
  .van-cell{
    margin-bottom: 0;
    
  }
  .dataName{
    color: #999999;
    font-size: .4rem;
    width: 92%;
    margin: 0.2rem auto;
  }
  .van-cell__title{
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: .8rem;
    height: 1rem;
  }
</style>
